<template>
  <el-dialog :title="form.title"
    :visible.sync="$store.state.dialogFormVisible">
    <el-form :model="stuForm"
      status-icon
      :rules="rules"
      ref="stuForm"
      label-width="100px"
      class="demo-ruleForm">
      <el-form-item label="头像">
        <el-upload action="https://chst.vip/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="1"
          name="headimgurl">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名"
        prop="name"
        required>
        <el-input type="text"
          v-model="stuForm.name"></el-input>
      </el-form-item>
      <el-form-item label="项目地址"
        prop="productUrl"
        required>
        <el-input type="text"
          v-model="stuForm.productUrl"></el-input>
      </el-form-item>
      <el-form-item label="班级"
        required
        prop="class">
        <el-input v-model.number="stuForm.class"></el-input>
      </el-form-item>
      <el-form-item label="年龄"
        required
        prop="age">
        <el-input v-model.number="stuForm.age"></el-input>
      </el-form-item>
      <el-form-item label="城市"
        required
        prop="city">
        <el-input v-model.number="stuForm.city"></el-input>
      </el-form-item>
      <el-form-item label="学历"
        required
        prop="degree">
        <el-input v-model.number="stuForm.degree"></el-input>
      </el-form-item>
      <el-form-item label="描述"
        required
        prop="description">
        <el-input v-model.number="stuForm.description"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
      class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary"
        @click="submitForm('stuForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as studentApi from "../../../../api/student";
var validate = (rule, value, callback) => {
  if (!value) {
    callback("该项不能为空");
  } else {
    callback();
  }
};
export default {
  data() {
    return {
      rules: {
        name: [{ validator: validate, trigger: "blur" }],
        productUrl: [{ validator: validate, trigger: "blur" }],
        class: [{ validator: validate, trigger: "blur" }],
        age: [{ validator: validate, trigger: "blur" }],
        city: [{ validator: validate, trigger: "blur" }],
        degree: [{ validator: validate, trigger: "blur" }],
        description: [{ validator: validate, trigger: "blur" }],
      },


      form: {
        title: "增加学员信息",
        name: "",
        region: "",
      },

      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          studentApi.addStudent(this.stuForm)
          .then(res => {
            console.log(res)
            if (res.data.state) {
              alert("添加成功");
              this.dialogFormVisible = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    uploadSuccess(r) {
      console.log(r);
      if (r.state) {
        this.stuForm.headimgurl = r.headimgurl;
      } else {
        this.$message.error("上传失败");
      }
    },
    removeAvatar() {},
  },
};
</script>


<style scoped lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>